<template>
  <div class="kg-collect w-full">
    <header class="kg-collect-header">个人收藏</header>
    <div class="kg-collect-list h-[272px]">
      <div
        class="kg-collect-item flex items-center my-4"
        v-for="(item, index) in 4"
        :key="index"
      >
        <div class="collect-icon">
          <i class="iconfont icon_qunti_fill"></i>
        </div>
        <div class="collect ml-2 flex-1">
          工专路一号店工专路一号店工专路一号
        </div>
      </div>
    </div>
    <div class="flex justify-end my-2">
      <el-pagination
        v-model:current-page="currentPage"
        :background="false"
        :pager-count="5"
        layout=" prev, pager, next"
        :total="100"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "kg-collect",
});
const currentPage = ref(1);
const handleCurrentChange = () => {};
</script>

<style scoped lang="scss">
.kg-collect {
  padding: 16px;
  border: 1px solid #dcdde2;
  border-radius: 4px;

  .kg-collect-header {
    height: 24px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #2b1dff;
  }

  .kg-collect-item {
    .collect-icon {
      width: 32px;
      height: 32px;
      line-height: 32px;
      color: #fff;
      text-align: center;
      background: #2b1dff;
      border-radius: 32px;
    }
  }
}
</style>
